<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
>
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <link rel="stylesheet" th:href="@{/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css}" type="text/css">
</head>
<body>
<div class="layui-form timo-compile">
    <form th:action="@{/mains/product/save}">
        <div class="layui-form-item">
            <label class="layui-form-label">机构类型</label>
            <div class="layui-input-inline">
                <select lay-verify="required" name="companyId" id="companyId">
                    <option th:each="car:${company}" th:value="${car.id}" th:text="${car.name}"></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">礼品名</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="prodName" placeholder="请输入礼品名">
            </div>
        </div>
        <div class="layui-form-item" id="jiage" style="display: block">
            <label class="layui-form-label required">价格(元)</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="oldPrice" placeholder="请输入原价" >
            </div>
        </div>

        <div class="layui-form-item" id="jifen" style="display: block">
            <label class="layui-form-label required">价值积分</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="points" placeholder="请输入价值积分" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">礼品类型</label>
            <div class="layui-input-inline">
                <select name="kinds" lay-verify="required" id="kinds" lay-filter="kinds">
                    <option value="0">医疗服务</option>
                    <option value="1">普通礼品</option>
                    <option value="2">爱帽饰品</option>
                </select>
            </div>
        </div>
        <div id="moreSizes">
            <div class="layui-form-item forwardT" style="display: none">
                <label class="layui-form-label required">型号</label>
                <div class="layui-input-inline">
                    <input class="layui-input " type="text" placeholder="请输入型号" name="subNames"/>
                </div>
                <label class="layui-form-label required">价格</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" placeholder="请输入价格" name="subPrice"/>
                </div>
                <div class="layui-upload layui-form-item">
                    <label class="layui-form-label required">图片</label>
                    <button type="button" class="layui-btn" id="subminPic"><i
                            class="layui-icon"></i>上传图片
                    </button>
                    <div id="submin-show" class="upload-show"></div>
                    <input type="hidden" id="subminPicName" name="subminipic">
                </div>
                <label class="layui-form-label required">排序</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" placeholder="请输入顺序" name="subSorts"/>
                </div>
                <label class="layui-form-label required">价值积分</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" placeholder="请输入积分" name="subPoints"/>
                </div>
                <input type="button" value="删除" onclick="removeMine(this)" class="layui-btn">
            </div>
        </div>
        <div class="layui-form-item" style="display: none" id="addSub">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="addMoreSizes">添加</button>
            </div>
        </div>
        <div class="layui-upload layui-form-item">
            <label class="layui-form-label required">缩略图(小)</label>
            <button type="button" class="layui-btn" id="minPic"><i class="layui-icon"></i>上传礼品缩略图</button>
            <div id="min-show" class="upload-show"></div>
            <input type="hidden" id="minPicName" name="minipic">
        </div>
        <div class="layui-upload layui-form-item">
            <label class="layui-form-label required">缩略图(大)</label>
            <button type="button" class="layui-btn" id="thumbPic"><i class="layui-icon"></i>上传礼品缩略图</button>
            <div id="thumb-show" class="upload-show"></div>
            <input type="hidden" id="thumbPicName" name="thumb">
        </div>
        <div class="layui-upload layui-form-item">
            <label class="layui-form-label required">礼品大图</label>
            <button type="button" class="layui-btn" id="maxPic"><i class="layui-icon"></i>上传礼品大图</button>
            <div id="max-show" class="upload-show"></div>
            <div id="manyPics">

            </div>
            <input type="hidden" id="maxPicName" name="images">
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">简介</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="profiles" placeholder="请输入简介">
            </div>
        </div>
        <input type="hidden" id="yinc" value="1">
        <div class="layui-form-item timo-finally">
            <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
            <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
        </div>
    </form>
</div>
<script th:replace="/common/template :: script"></script>
<script type="text/javascript" th:src="@{/js/plugins/jquery-3.3.1.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/zTree_v3/js/jquery.ztree.core.min.js}"></script>
<script type="text/javascript">

    var uploadss = new Object();

    function generateSizes(m) {
        var ll = '';
        ll += '<div class="layui-form-item forwardT"  style="display: block">';
        ll += '<label class="layui-form-label">型号</label>';
        ll += '<div class="layui-input-inline">';
        ll += '<input class="layui-input" type="text" placeholder="请输入型号" name="subNames"/></div>';
        ll += '<label class="layui-form-label">价格</label><div class="layui-input-inline"><input class="layui-input" type="text" placeholder="请输入价格" name="subPrice"/></div>';
        ll += '<div class="layui-upload layui-form-item"><label class="layui-form-label required">图片</label><button type="button" class="layui-btn" id="subminPic'+m+'" ><i class="layui-icon"></i>上传图片</button><div id="submin-show'+m+'" class="upload-show"></div><input type="hidden" id="subminPicName'+m+'" name="subminipic"></div>';
        ll += '<label class="layui-form-label required">排序</label><div class="layui-input-inline"><input class="layui-input" type="text" placeholder="请输入顺序" name="subSorts"/></div>';
        ll += '<label class="layui-form-label required">价值积分</label><div class="layui-input-inline"><input class="layui-input" type="text" placeholder="请输入积分" name="subPoints"/></div>';
        ll += '<input type="button" value="删除" onclick="removeMine(this)" class="layui-btn">';
        ll += '</div>';
        $("#yinc").val(parseInt(m) + 1);
        return ll;
    }
    function  picupload(id,ids,idss){
        uploadss.render({
            elem: id
            ,url: '/mains/product/upload'
            ,field: 'image' //文件域的字段名
            ,acceptMime: 'image/!*' //选择文件类型
            ,exts: 'jpg|jpeg|png|gif' //支持的图片格式
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load('图片正在上传中，请稍后......',{icon: 16,time:false,shade:0.8}); //上传loading
            }
            ,choose: function (obj) {
                obj.preview(function (index, file, result) {
                    var upload = $(id);
                    var show = upload.parents('.layui-form-item').children(ids);
                    show.append("<div class='upload-item'><img src='"+ result +"'/>" +
                        "<i class='upload-item-close layui-icon layui-icon-close'></i></div>");
                });
            }
            ,done: function(res){
                if(res.code ==400){
                    layer.closeAll('loading'); //关闭loading
                    return layer.msg('上传失败');
                }
                layer.closeAll('loading'); //关闭loading
                console.log(res.data);
                $(idss).val(res.data);
            }
            ,error: function(index, upload){
                layer.closeAll('loading');
                return layer.msg('上传失败');
            }
        });
    }
    function removeMine(e) {
        var len = $(".forwardT").length;
        if (len == 1) {
            layer.msg('亲,至少保留一个尺寸属性', {icon: 5});
        } else {
            var soC = $(e).parents(".forwardT").remove();
        }
    };

    $("#addMoreSizes").on("click", function () {
        var index = $("#yinc").val();
        var l = generateSizes(index);
        $("#moreSizes").append(l);
        picupload("#subminPic" + index + "","#submin-show" + index + "","#subminPicName" + index + "");
    })


    // 树形菜单
    layui.use(['form', 'upload'], function () {
        var form = layui.form, upload = layui.upload;
        var tempClazz = '';
        var mm = $("#yinc").val();
        uploadss = upload;
        form.on('select(kinds)', function (data) {
            var forwards = data.value;
            if (forwards == 2) {

                $(".forwardT").show();
                $("#addSub").show();
                $("#jiage").hide();
                $("#jifen").hide();
                $(".oldPrice").attr("disabled",true);
                $(".points").attr("disabled",true);

            } else {

                $(".forwardT").hide();
                $("#addSub").hide();
                $("#jiage").show();
                $("#jifen").show();
                $(".oldPrice").removeAttr("disabled");
                $(".points").removeAttr("disabled");

            }
        });



        var maxPicUP = upload.render({
            elem: '#maxPic'
            , url: '/mains/product/upload'
            , field: 'image' //文件域的字段名
            , acceptMime: 'image/*' //选择文件类型
            , exts: 'jpg|jpeg|png|gif' //支持的图片格式
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load('图片正在上传中，请稍后......', {icon: 16, time: false, shade: 0.8}); //上传loading
            }
            , choose: function (obj) {
                tempClazz = new Date().getTime();
                obj.preview(function (index, file, result) {
                    var upload = $('#maxPic');
                    var show = upload.parents('.layui-form-item').children('#max-show');
                    show.append("<div class='upload-item'><img src='" + result + "'/>" +
                        "<i class='upload-item-close layui-icon layui-icon-close " + tempClazz + "' data-cla='" + tempClazz + "'></i></div>");
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code == 400) {
                    layer.closeAll('loading'); //关闭loading
                    return layer.msg('上传失败');
                }
                layer.closeAll('loading'); //关闭loading
                $("#manyPics").append('<input type="hidden" value="' + res.data + '" name="imagesSet" class="' + tempClazz + '">');
                $("#maxPicName").val(res.data);
                //上传成功
            }
            , error: function (index, upload) {
                layer.closeAll('loading');
                return layer.msg('上传失败');
            }
        });


        var minPicUP = upload.render({
            elem: '#minPic'
            , url: '/mains/product/upload'
            , field: 'image' //文件域的字段名
            , acceptMime: 'image/*' //选择文件类型
            , exts: 'jpg|jpeg|png|gif' //支持的图片格式
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load('图片正在上传中，请稍后......', {icon: 16, time: false, shade: 0.8}); //上传loading
            }
            , choose: function (obj) {
                obj.preview(function (index, file, result) {
                    var upload = $('#minPic');
                    var show = upload.parents('.layui-form-item').children('#min-show');
                    show.append("<div class='upload-item'><img src='" + result + "'/>" +
                        "<i class='upload-item-close layui-icon layui-icon-close'></i></div>");
                });
            }
            , done: function (res) {
                if (res.code == 400) {
                    layer.closeAll('loading'); //关闭loading
                    return layer.msg('上传失败');
                }
                layer.closeAll('loading'); //关闭loading
                console.log(res.data);
                $("#minPicName").val(res.data);
            }
            , error: function (index, upload) {
                layer.closeAll('loading');
                return layer.msg('上传失败');
            }
        });

                var subPicUP = upload.render({
                    elem: '#subminPic'
                    ,url: '/mains/product/upload'
                    ,field: 'image' //文件域的字段名
                    ,acceptMime: 'image/!*' //选择文件类型
                    ,exts: 'jpg|jpeg|png|gif' //支持的图片格式
                    ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                        layer.load('图片正在上传中，请稍后......',{icon: 16,time:false,shade:0.8}); //上传loading
                    }
                    ,choose: function (obj) {
                        obj.preview(function (index, file, result) {
                            var upload = $('#subminPic');
                            var show = upload.parents('.layui-form-item').children('#submin-show');
                            show.append("<div class='upload-item'><img src='"+ result +"'/>" +
                                "<i class='upload-item-close layui-icon layui-icon-close'></i></div>");
                        });
                    }
                    ,done: function(res){
                        if(res.code ==400){
                            layer.closeAll('loading'); //关闭loading
                            return layer.msg('上传失败');
                        }
                        layer.closeAll('loading'); //关闭loading
                        console.log(res.data);
                        $("#subminPicName").val(res.data);
                    }
                    ,error: function(index, upload){
                        layer.closeAll('loading');
                        return layer.msg('上传失败');
                    }
                });


        var thumbPicUP = upload.render({
            elem: '#thumbPic'
            , url: '/mains/product/upload'
            , field: 'image' //文件域的字段名
            , acceptMime: 'image/*' //选择文件类型
            , exts: 'jpg|jpeg|png|gif' //支持的图片格式
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load('图片正在上传中，请稍后......', {icon: 16, time: false, shade: 0.8}); //上传loading
            }
            , choose: function (obj) {
                obj.preview(function (index, file, result) {
                    var upload = $('#thumbPic');
                    var show = upload.parents('.layui-form-item').children('#thumb-show');
                    show.append("<div class='upload-item'><img src='" + result + "'/>" +
                        "<i class='upload-item-close layui-icon layui-icon-close'></i></div>");
                });
            }
            , done: function (res) {
                if (res.code == 400) {
                    layer.closeAll('loading');
                    return layer.msg('上传失败');
                }
                layer.closeAll('loading'); //关闭loading
                console.log(res.data);
                $("#thumbPicName").val(res.data);
            }
            , error: function (index, upload) {
                layer.closeAll('loading');
                return layer.msg('上传失败');
            }
        });
    })
</script>
</body>
</html>
